<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>《系统工程》精品资源共享课——个人信息</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<style type="text/css">
		main{
			background-color: white;
			width:70%;
			margin:70px auto;
		}
		main .content{
			width:80%;
			padding:30px 230px;
			margin:0 auto;
		}

		main .content .btn-groups{
			width:100%;
			margin:0 auto;
		}
	</style>
</head>
<body>
	<div id="top">
		<img src="../image/huanonglogo.png" class="logo">
		<ul>
			<li><a href="userInformation.html">个人信息</a></li>
			<li><span id="user"></span></li>
			<li class="logout hidden"><a href="login.html">退出</a></li>
			<li id="login" class="login"><a href="html/login.html"><img src="../image/user.png"><span>登录</span></a></li>
		</ul>
	</div>
	<nav>
		<ul class="rows">
			<li class="col-md-2 col-lg-2"><a href="../index.html">首页</a></li>
			<li class="dropdown col-md-2 col-lg-2">
				<a href="#"  data-toggle="dropdown" class="dropdown-toggle">课程概要<span class="glyphicon glyphicon-chevron-down"></span></a>
				<ul class="dropdown-menu">
					<li><a href="primaryResource.html">教学大纲</a></li>
					<li><a href="primaryResource.html">教学日历</a></li>
					<li><a href="primaryResource.html">教学教材</a></li>
					<li><a href="primaryResource.html">参考资料</a></li>
					<li><a href="primaryResource.html">重点难点</a></li>
				</ul>
			</li>
			<li class="dropdown col-md-2 col-lg-2">
				<a href="#"  data-toggle="dropdown" class="dropdown-toggle">课程资源<span class="glyphicon glyphicon-chevron-down"></span></a>
				<ul class="dropdown-menu">
					<li><a href="video.html">教学视频</a></li>
					<li><a href="ppt.html">教学课件</a></li>
					<li><a href="homework.html">作业</a></li>
				</ul>
			</li>
			<li class="col-md-2 col-lg-2"><a href="courses.html">课程内容</a></li>
			<li class="col-md-2 col-lg-2"><a href="expandingResource.html">拓展资源</a></li>
			<li class="col-md-2 hidden teacher_li"><a href="teacherCourseManagement.html">课程管理</a></li>
		</ul>

	</nav>
	<main>
		<div class="content">
			<div class="form-group">
				<label for="name">用户名:</label>
				<span name="name"></span>
			</div>
			<div class="form-group">
				<label for="nickname">用户昵称:</label>
				<span name="nickname"></span>
			</div>
			<div class="form-group">
				<label for="sex">性别:</label>
				<span name="sex"></span>
			</div>
			<div class="form-group">
				<label for="telphone">电话:</label>
				<span name="tel"></span>
			</div>
			<div class="form-group">
				<label for="school">学校:</label>
				<span name="school"></span>
			</div>		
			<div class="form-group">
				<label for="major">专业:</label>
				<span name="major"></span>
			</div>
			<div class="form-group">
				<label for="grade">年级:</label>
				<span name="grade"></span>
			</div> 
			<div class="form-group btn-groups">
				<button class="btn btn-default"  data-toggle="modal" data-target="#updatePwdModal">修改密码</button>
				<button class="btn btn-info" data-toggle="modal" data-target="#updateModal">修改信息</button>
			</div>               		
		</div>
	</main>
	<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="addModalLabel">修改个人信息</h4>
	            </div>
	            <div class="modal-body">
	            	<form role="form">
	            		<input type="text" name="id" class="form-control hidden">
						<div class="form-group">
							<label for="name">用户名</label>
							<input type="text" name="name" class="form-control required " disabled />
						</div>
						<div class="form-group">
							<label for="nickname">用户昵称</label>
							<input type="text" name="nickname" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="sex">性别</label>
							<select name="sex" class="form-control required">
								<option>男</option>
								<option>女</option>
							</select>
						</div>
						<div class="form-group">
							<label for="telphone">电话</label>
							<input type="text" name="tel" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="school">学校</label>
							<input type="text" name="school" class="form-control required "/>
						</div>		
						<div class="form-group">
							<label for="major">专业</label>
							<input type="text" name="major" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="grade">年级</label>
							<input type="text" name="grade" class="form-control required "/>
						</div>  
	            	</form>
	            	</form>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary btn-submit" onclick="isNull()">提交</button>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>
	<div class="modal fade" id="updatePwdModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="addModalLabel">修改密码</h4>
	            </div>
	            <div class="modal-body">
	            	<form role="form">
	            		<div class="form-group">
							<label for="password">原密码</label>
							<input type="password" name="oldPassword" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="password">新密码</label>
							<input type="password" name="newPassword" class="form-control required "/>
							<strong style='color:red' class="hidden" id="checkPwd">两次密码不一致</strong>
						</div>
						<div class="form-group">
							<label for="password">重复密码</label>
							<input type="password" name="newPasswordAgain" class="form-control required "/>
							<strong style='color:red' class="hidden" id="checkPwd">两次密码不一致</strong>
						</div>
	            	</form>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary btn-submit" onclick="isNull()">提交</button>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>
	<footer>
		<p>版权所有：华南农业大学 数学与信息学院 软件学院</p>
	</footer>
	<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript">
		$(function(){
			var role=sessionStorage.getItem("role");
			var nickname=sessionStorage.getItem("nickname");
			var name=sessionStorage.getItem("name");
			if(role=="teacher"){
				var arr=$("#updateModal form .form-control").filter(".form-control[name='school'],.form-control[name='major'],.form-control[name='grade']");
		        arr.each(function(index, el) {
		            $(el).parent().addClass('hidden');
		        });
		        var arrContent=$(".content span").filter("span[name='school'],span[name='major'],span[name='grade']");
		        arrContent.each(function(index, el) {
		            $(el).parent().addClass('hidden');
		        });
			}
			//初始化数据
			$("#updateModal form .form-control[name='id']").val(sessionStorage.getItem("id"));
			$("#updateModal form .form-control[name='name']").val($(".content span[name='name']").html(name).html());
			$("#updateModal form .form-control[name='nickname']").val($(".content span[name='nickname']").html(nickname).html());
			$("#updateModal form .form-control[name='sex']").val($(".content span[name='sex']").html(sessionStorage.getItem("sex")).html());
			$("#updateModal form .form-control[name='tel']").val($(".content span[name='tel']").html(sessionStorage.getItem("tel")).html());
			$("#updateModal form .form-control[name='school']").val($(".content span[name='school']").html(sessionStorage.getItem("school")).html());
			$("#updateModal form .form-control[name='major']").val($(".content span[name='major']").html(sessionStorage.getItem("major")).html());
			$("#updateModal form .form-control[name='grade']").val($(".content span[name='grade']").html(sessionStorage.getItem("grade")).html());

		})
		function isNull(){
			$("form :input.required").each(function(){
				var obj=$(this).parent().find('.alarm');
				if($(this).val()==""){
					if(obj.length==0){
						$(this).parent().append("<b style='color:red' class='alarm'>该字段不能为空</b>");
					}
				}else{
					$(this).parent().find('.alarm').remove();
				}

			})


		}
		$("form :input[name='newpasswordAgain']").blur(function(event) {
			var pwd1=$("form :input[name='newpassword']").val();
			var pwd2=$("form :input[name='newpasswordAgain']").val();
			if(pwd1!=pwd2){
				$("#checkPwd").removeClass('hidden');
			}else{
				$("#checkPwd").hide();
			}
		});

		$("#updatePwdModal form :input[name='oldPassword']").blur(function(event) {
			var oldPwd=sessionStorage.getItem("password");
			if($(this).val()!=oldPwd){
				alert("原密码错误，请重新确定");
				$("#updatePwdModal .btn-submit").attr('disabled',true);
			}else{
				$("#updatePwdModal .btn-submit").removeAttr('disabled');
			}
		});

		$("#updatePwdModal .btn-submit").click(function(event) {
			var role=sessionStorage.getItem("role");
			var id=sessionStorage.getItem("id");
			var url="",params={};
			if(role == "student"){
				url="studentController/edit";
			}else if(role == "teacher"){
				url="teacherController/edit";
			}
			var newPwd=$("form :input[name='newpasswordAgain']").val();
			params.id=id;
			params.password=newPwd;
			$("form :input.required").each(function(){
				if($(this).val()!=""){
					$.ajax({
						url: url,
			            type: 'post',
			            dataType : "json",
			            contentType : "application/json;charset=utf-8",
			            data: JSON.stringify(params),
			            success:function(data){
			              if(data==1){
			                alert("修改成功！");
			                
			              }else{
			                alert("修改失败！");
			              }
			            }
					});
				}

			})
			
			
		});
		
	</script>
</body>
</html>